<script setup >
import { useViewSize } from "@hooks";
import { LoadingOutlined } from "@ant-design/icons-vue";

const {
  data,
  getViewportSize
} = useViewSize();
const show = ref( true );
onMounted( () => {
  const observer = new IntersectionObserver( ( entries ) => {
    entries.forEach( ( entry ) => {
      if ( entry.isIntersecting ) {
        console.log( "进入视口" );
      }
    } );
  } );
  observer.observe( document.getElementById( "loading" ) ); // 监听元素进入视口
  console.log( "页面加载完成" );
} );
</script >

<template >
  <a-button @click="getViewportSize" >获取窗口大小</a-button >
  <div >
    <div >宽度：{{ data.width }}</div >
    <div >高度：{{ data.height }}</div >
  </div >
  
  <!-- transition-->
  <div class="mt-10 min-h-screen" >
    <a-button @click="show = !show" >Toggle</a-button >
    <Transition >
      <p v-if="show" >hello</p >
    </Transition >
  </div >
  
  <div class="mt-20 text-center" id="loading" >
    <LoadingOutlined :style="{fontSize:'30px', color: '#1e9fff'}"/>
  </div >
</template >

<style >
@import "tailwindcss";

.v-enter-active, .v-leave-active {
  transition: opacity 1s ease;
}

.v-enter-from, .v-leave-to {
  opacity: 0;
}

</style >